Component({
    externalClasses: ['map-item'], // 向外暴露类名
    properties: {
        // positionToShow: [],
        positionToShow: {
            type: Array,
            value: [],
            observer: function(newVal, oldVal) {
                // positionToShow改变则更新其他的值
                this.getMyData()
            }
        },
        isShow: {
            value: null,
            observer(newVal, oldVal) {
                if (newVal) {
                    this.getPolyline()
                }

            }
        }
    },
    // 私有数据，可用于模版渲染
    // 根据父组件生成的数据
    data: {
        longitude: 0, // 经度
        latitude: 0, //维度
        markers: [],
        polyline: [],
    },

    methods: {
        getPolyline() {
            let _positionToShow = this.data.positionToShow
            let polyline = [{
                points: [],
                color: '#000000AA',
                width: 2,
                dottedLine: true,
                arrowLine: true,
                // arrowIconPath: '开发者服务器图片路径',
                borderColor: '#FFB6C1',
                borderWidth: 5
            }]
            for (let i = 0; i < _positionToShow.length; i++) {
                let _point = {}
                _point.longitude = _positionToShow[i].longitude
                _point.latitude = _positionToShow[i].latitude
                polyline[0].points.push(_point)
            }
            this.setData({
                polyline,
            })
        },
        getMyData() {
            let _positionToShow = this.data.positionToShow
            if (_positionToShow.length === 0) {
                // 父组件还没有把数据传过来
                // console.log('空');
                return
            }
            let longitude = _positionToShow[0].longitude
            let latitude = _positionToShow[0].latitude
            let markers = []

            for (let i = 0; i < _positionToShow.length; i++) {
                let _marker = {}
                _marker.longitude = _positionToShow[i].longitude
                _marker.latitude = _positionToShow[i].latitude
                _marker.markerId = i
                _marker.width = 30
                _marker.height = 50
                _marker.callout = {}
                _marker.callout.content = _positionToShow[i].position
                _marker.callout.display = 'ALWAYS'
                _marker.callout.color ='#000'
                _marker.callout.fontSize = '12'
                _marker.callout.borderRadius = 20
                _marker.callout.bgColor = '#5B9FFF'
                _marker.callout.padding = 2
                markers.push(_marker)
            }
            this.setData({
                markers,
                latitude,
                longitude,
            })
        },
        bindcallouttap(e) {
            let id = e.markerId
            this.arouseActivity(id)
        },
        bindmarkertap(e) {
            let id = e.markerId
            this.arouseActivity(id)
        },
        arouseActivity(id) {
            let myEventDetail = {value: id} // detail对象，提供给事件监听函数
            let myEventOption = {bubbles: true} // 触发事件的选项
            this.triggerEvent('myevent', myEventDetail, myEventOption);
        },
        getLocation() {
            swan.getLocation({
                type: 'gcj02',
                altitude: true,
                success: res => {
                    console.log('getLocation success', res);
                    let _latitude = res.latitude
                    let _longitude = res.longitude
                    this.setData({
                        latitude: _latitude,
                        longitude: _longitude,
                    });
                    console.log(this.getData());
                },
                fail: err => {
                    swan.showToast({title: '获取失败'});
                }
            });
        },
    }
});
